<template>
    <div>
        <el-form :inline="true" class="demo-form-inline" v-model="searchForm">
            <el-form-item>
                <el-input
                        v-model="searchForm.Name"
                        placeholder="学号"
                        clearable
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchRole" icon="el-icon-search"
                >查找</el-button
                >
            </el-form-item>
            <el-form-item>
                <el-button
                        type="primary"
                        @click="apply()"
                        icon="el-icon-circle-plus-outline"
                >我要请假</el-button
                >
            </el-form-item>

        </el-form>
        <el-table
                ref="tableData"
                :data="tableData"
                tooltip-effect="dark"
                border
                stripe
                style="width: 100%"
                :default-sort = "{prop: 'startDate', order: 'descending'}"
                @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="name" label="姓名" width="70"> </el-table-column>
            <el-table-column prop="student_Id"  sortable label="学号" width="100">
            </el-table-column>
            <!-- <el-table-column prop="id" label="学号" width="150">
            </el-table-column>
            <el-table-column prop="id" label="学号" width="150">
            </el-table-column> -->
            <el-table-column prop="startDate"  sortable label="请假开始时间" width="170">
            </el-table-column>
            <el-table-column prop="endDate"  sortable label="请假结束时间" width="170">
            </el-table-column>
            <el-table-column prop="isLeave" label="是否离校" width="90">
            </el-table-column>
            <el-table-column prop="destination" label="目的地" width="150">
            </el-table-column>
            <el-table-column prop="reason" label="请假原因" width="90">
            </el-table-column>
            <el-table-column prop="evidence" label="核酸证明" width="90">
            </el-table-column>
            <el-table-column prop="statues" label="状态" width="90">
            </el-table-column>
            <el-table-column prop="examine" label="审批意见" width="110">
                <template v-slot="slotProps">
                    <el-select
                            v-model="slotProps.row.examine"
                            placeholder="请选择"
                            @change="changeSelect(slotProps.row.id,slotProps.row.examine)"
                    >
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" width="100">
            </el-table-column>
            <!-- <el-table-column prop="statu" width="160" label="状态">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.statu === '1'" type="success">正常</el-tag>
                <el-tag v-if="scope.row.statu === '0'" type="danger">禁用</el-tag>
              </template>
            </el-table-column> -->
            <el-table-column label="操作" width="170">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row.id)"
                    >编辑</el-button
                    >
                    <!-- <el-button size="mini" @click="disAuth(scope.row.id)"
                      >分配权限</el-button
                    > -->
                    <el-popconfirm
                            title="这是一段内容确定删除吗？"
                            @confirm="handleDelete(scope.row.id)"
                    >
                        <el-button slot="reference" type="danger" size="small"
                        >删除</el-button
                        >
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.CurrentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="page.Size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.Total"
        >
        </el-pagination>
        <el-dialog
                title="请假"
                :visible.sync="applyDialog"
                width="38.2%"
                :before-close="closeApplyDialog"

        >
            <el-form
                    :model="applyForm"
                    :rules="applyRules"
                    ref="applyForm"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <!-- <el-form-item label="开始日期" prop="startDate">
                  <el-input v-model="applyForm.startDate"></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="学号" prop="id"  >
                  <el-input v-model="addForm.id" :disabled="editId"></el-input>
                </el-form-item> -->
                <el-form-item label="请假时间" prop="applyDate">
                    <el-date-picker
                            v-model="applyDate"
                            :clearable="false"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <!-- <el-form-item label="结束日期" prop="endDate">
                  <el-input v-model="addForm.endDate"></el-input>
                </el-form-item> -->

                <el-form-item label="学号" >
                    <el-input style="width:75%" v-model="applyForm.id"></el-input>
                </el-form-item>

                <el-form-item label="目的地" prop="destination">
                    <el-input style="width:75%" v-model="applyForm.destination"></el-input>
                    <el-button style="width:20%" type="primary" @click="searchDestination">查询</el-button>
                </el-form-item>
                <el-form-item label="地址" prop="area">
                    <el-input style="width:22%;padding-right:5px" v-model="applyForm.country"></el-input>
                    <el-input style="width:22%;padding-right:5px" v-model="applyForm.province"></el-input>

                    <el-input style="width:22%;padding-right:5px"  v-model="applyForm.city"></el-input>
                    <el-input style="width:22%;padding-right:5px" v-model="applyForm.district"></el-input>
                </el-form-item>
                <el-form-item label="请假事由" prop="reason">
                    <el-input v-model="applyForm.reason"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input
                            type="textarea"
                            :rows="2"
                            v-model="applyForm.remark"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                            type="primary"
                            size="small"
                            @click="submitApplyForm('applyForm')"
                            :loading="loading"
                            :disabled="this.applyDisabled"
                    >立即申请</el-button
                    >
                    <el-button @click="resetForm('applyForm')" size="small">重置</el-button>
                    <el-button @click="closeApplyDialog = false" size="small"
                    >取 消</el-button
                    >
                </el-form-item>
            </el-form>

        </el-dialog>
    </div>
</template>

<script>
    import { request } from "@/axios/request"
    import qs from 'qs'
    export default {
        name: "Leave",
        data() {
            return {
                applyDisabled:true,
                applyDate:["2022-07-01 19:00:00", "2022-12-01 20:00:00"],
                applyForm:{
                    id:null,
                    startDate:null,
                    endDate:null,
                    destination:null,
                    reason:null,
                    remark:null,
                    country:null,
                    province:null,
                    city:null,
                    district:null
                },
                applyDialog:false,
                data: [],
                loading:false,
                TreeData:{},
                currentRoleId:null,
                editId:false,
                addDialogVisible: false,
                disDialogVisible:false,
                searchForm: {
                    Name: "",
                },
                addForm: {
                    name: '',
                    id:'',
                    sex: '',
                    college:'',
                    phone: '',
                },
                page: {
                    Size: 10,
                    CurrentPage: 1,
                    Total: null
                },
                selectIds:[],
                delButSta: true,
                tableData: [],
                rules: {
                    name: [
                        { required: true, message: "请输入姓名", trigger: "blur" },
                        { min: 1, max: 8, message: "长度在 1 到 8 个字符", trigger: "blur" },
                    ],
                    id: [
                        { required: true, message: "请输入学号", trigger: "blur" },
                        { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" },
                    ],
                    phone: [
                        { required: true, message: "请输入手机号", trigger: "blur" },
                    ],
                    college: [{ required: true, message: "请输入学院", trigger: "blur" }],
                },
                applyRules: {
                    destination: [
                        { required: true, message: "请输入目的地", trigger: "blur" },

                    ],
                    reason: [
                        { required: true, message: "请输入原因", trigger: "blur" },

                    ]
                },
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
            };
        },
        created() {

        },
        methods: {

            submitApplyForm(applyForm){
                this.$refs[applyForm].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        console.log(this.applyForm.id)
                        request({
                            url: "/examine",
                            method: "post",
                            data: {
                                "student_id":this.applyForm.id,
                                "startdate":this.applyDate[0],
                                "enddate":this.applyDate[1],
                                "reason":this.applyForm.reason,
                                "destination":this.applyForm.destination,/*country+this.applyForm.province+
                this.applyForm.city+this.applyForm.district,*/
                                "remark":this.applyForm.remark
                            },
                        }).then(res => {
                            this.applyDialog = false
                            this.$message({
                                message:res.data.msg,
                                type:'success'
                            })
                        })
                        this.loading = false
                        this.resetForm('applyForm')

                    } else {
                        alert("error submit!!");
                        return false;
                    }
                })
            },
            submitForm(addForm) {
                this.$refs[addForm].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        if (this.addForm.id) {
                            //console.log("1")
                            this.puttableData(this.addForm.id);
                        } else {

                            request({
                                url: "/student",
                                method: "post",
                                data: this.addForm,
                            }).then(res => {
                                this.addDialogVisible = false
                                this.$message({
                                    message:res.data.msg,
                                    type:'success'
                                })
                                this.gettableData()
                            })
                            this.loading = false
                            this.resetForm('addForm')

                        }
                    } else {
                        alert("error submit!!");
                        return false;
                    }
                });
            },

            //获取所有已经选择的id
            handleSelectionChange(val){
                this.selectIds=[]
                if(val.length!==0){
                    val.forEach(element => {
                        this.selectIds.push(element.id)
                    })
                    this.delButSta=false
                }else{
                    this.delButSta=true
                }
            },
            //获取所有数据
            gettableData() {

                request({
                    url: "/student",
                    method: "get",
                    params:{
                        Name:this.searchForm.Name,
                        CurrentPage:this.page.CurrentPage,
                        Size:this.page.Size
                    }
                }).then(res => {

                    this.tableData = res.data.object.data
                    this.page.Total=res.data.object.TotalCount;

                });

            },
            //请假
            apply(id){
                this.applyDialog=true
                this.applyForm.id=id
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            closeDialog(done) {
                this.resetForm('addForm')
                this.loading=false
                done()
            },
            closeApplyDialog(done){
                this.resetForm('applyForm')
                this.loading=false
                done()
            },
            handleSizeChange(val) {
                this.page.Size=val
                this.gettableData()
            },
            handleCurrentChange(val) {
                this.page.CurrentPage=val
                this.gettableData()
            },
            //批量删除数据
            deleteRoles(){
                request({
                    url:'/student',
                    method:'delete',
                    params:{
                        ids:this.selectIds
                    },
                    paramsSerializer: params => {
                        return qs.stringify(params, { indices: false })
                    }
                }).then(res=>{
                    this.delButSta=false
                    this.gettableData()
                    this.$message({
                        message:res.data.msg,
                        type:'success'
                    })
                })
            },
            searchDestination(){
                request({
                    url:"/Address/"+this.applyForm.destination,
                    method:"get"
                }).then(res=>{
                    if(res.data.stateCode==200){
                        this.applyDisabled = false
                        this.applyForm.country=res.data.object.country=="[]" ? "":res.data.object.country
                        this.applyForm.province=res.data.object.province=="[]" ? "":res.data.object.province
                        this.applyForm.city=res.data.object.city=="[]" ? "":res.data.object.city
                        this.applyForm.district=res.data.object.district=="[]" ? "":res.data.object.district
                        this.applyForm.destination=res.data.object.formatted_address
                        this.$message({
                            message:res.data.msg,
                            type:'success'
                        })
                    }else{
                        this.applyDisabled = true
                        this.$message({
                            message:res.data.msg,
                            type:'error'
                        })
                    }

                })
            },
            //查找符合学生的角色
            searchRole() {
                this.gettableData()
            },
            //修改学生信息
            puttableData(id) {

                this.loading = true
                request({
                    url: "/student",
                    method: "put",
                    data: this.addForm,
                }).then(res => {
                    this.addDialogVisible = false
                    this.$message({
                        message:res.data.msg,
                        type:'success'
                    })
                    this.gettableData()
                })
                this.loading = false
                this.resetForm('addForm')

            },
            //根据id回写学生信息
            handleEdit(id) {
                this.editId=true
                request({
                    url: "/student/" + id,
                    method: "get",
                }).then((res) => {
                    this.$nextTick(() => { // 注意看这里
                        this.addForm = res.data.object;
                        this.addDialogVisible = true;
                    })

                });
            },
            // //分配按钮点击事件
            // disAuth(id){
            //   this.currentRoleId=id
            //   this.disDialogVisible=true
            //   request({
            //     url:'/role/menu/'+id,
            //     method:'get'
            //   }).then(res=>{
            //     this.$refs.AuthTree.setCheckedKeys(res.data.object)
            //   })
            // },
            //删除数据
            handleDelete(id) {
                this.selectIds=[]
                this.selectIds.push(id)
                this.deleteRoles()
            },

        }}
</script>

<style scoped>
    .el-pagination {
        float: right;
    }
    .el-form {
        padding-right: 40px;
    }
    .el-button{
        margin-right: 7px;
        margin-left: 10px;
    }
</style>
